<template>
  <vc-page v-loading="loading">
    <vc-search @search="search()" @reset-form="$message.success('搜索条件重置成功')" :model="searchParams">
      <vc-search-item label="姓名" prop="name">
        <el-input clearable v-model="searchParams.name"></el-input>
      </vc-search-item>
      <vc-search-item label="年龄" prop="age">
        <el-input clearable v-model="searchParams.age"></el-input>
      </vc-search-item>
      <template slot="main">
        <el-input placeholder="关键词" clearable></el-input>
      </template>
    </vc-search>

    <vc-table-header :count="result.total" :exports="exports"></vc-table-header>
    <el-table border :data="result.data">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="年龄">
        <template slot-scope="{row}">
          <el-button type="text" @click="$message(row.name)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <vc-pagination :total="result.total" :page-size="result.pageSize" :current-page="result.currentPage" @current-change="search"></vc-pagination>

  </vc-page>
</template>

<script>
  export default {
    name: 'index',
    data() {
      return {
        loading: false,
        searchParams: {
          name: '',
          age: ''
        },
        result: {}
      }
    },
    mounted() {
      this.search()
    },
    methods: {
      search(index = 1) {
        console.log('搜索', this.searchParams)
        this.loading = true
        setTimeout(()=> {
          const pageSize = 10;
          let arr = []
          for (let i = 1; i <= pageSize; i++) {
            const num = (index-1)*pageSize+i
            arr.push({
              name: `姓名${num}`,
              age: num
            })
          }
          this.result = {
            data: arr,
            total: 200,
            pageSize,
            currentPage: index
          }
          this.loading = false
        }, 300)
      },
      async search2() {
        await this.$httpPost('/test', {payload: {name: '666'}}, {
          error: ()=> {
            console.log('接口报错')
            return true
          }
        })
        .catch((e)=> {
          console.log('咋回事啊', e)
        })
        console.log('接口调用完成')
      },
      exports(resolve) {
        console.log('导出', resolve)
      }
    }
  }
</script>